import { Toast, Button } from 'antd-mobile';
import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqcartlist, reqcartedit, reqcartdeletet } from "../../http/api"
import { $pre } from "../../http/http";
import "./Shop.less"
import yImg from "../../assets/img/y.jpeg"
import nImg from "../../assets/img/n.jpeg"

import { Dialog, List, SwipeAction } from 'antd-mobile'




export default class Shop extends Component {

  constructor(props) {
    super(props);
    this.state = {
      info: []
    }
    this.isRequest = true
  }

  componentDidMount() {
    this.getList()
  }
  async getList() {
    let res = await reqcartlist({
      uid: JSON.parse(sessionStorage.getItem("userInfo")).uid
    });
    if (res.data.code === 200) {
      let arr1 = res.data.list[0].content ? res.data.list[0].content : []
      let arr2 = res.data.list[1].content ? res.data.list[1].content : []
      let arr = [...arr1, ...arr2]

      //补checked
      arr.forEach(item => {
        item.checked = false
      })
      this.setState({
        info: arr,
      }, () => {
        this.isRequest = true
      })
    }
  }

  //数量+
  async add(id) {
    let res = await reqcartedit({ id: id, type: 2 })
    if (res.data.code === 200) {
      Toast.show({
        content: res.data.msg
      })
      this.getList()
    }

  }

  //数量-
  async add2(id, num) {
    if (num > 1) {
      if (this.isRequest) {
        this.isRequest = false;
        let res = await reqcartedit({ id: id, type: 1 })
        if (res.data.code === 200) {
          Toast.show({
            content: res.data.msg
          })
          this.getList()
        }
      }

    } else {
      Toast.show({
        content: "不能再少了"
      })
    }


  }
  //删除
  async del(id) {
    let res = await reqcartdeletet({ id: id })
    if (res.data.code === 200) {
      Toast.show({
        content: res.data.msg
      })
      this.getList()
    }
  }
  //点了全选
  changeAll() {
    this.setState(
      {
        allChecked: !this.state.allChecked,
      },
      () => {
        // 做
        this.state.arr.forEach((item) => {
          item.checked = this.state.allChecked;
        });
        //放
        this.setState({
          info: this.state.info,
        });
      }
    );
  }
  //修改了某一个
  changeOne(index) {
    let { info } = this.state;
    // 做
    info[index].checked = !info[index].checked;

    //放
    this.setState({
      info: info,
      allChecked: info.every((item) => item.checked),
    });
  }



  render() {
    let { info, allChecked } = this.state
    //总价
    let allPrice = info.reduce(
      (v, i) => (i.checked ? v + i.price * i.num : v),
      0
    );
    return (
      <div className='shop'>
        <Header register title="购物车"></Header>
        <div>
          {info.map((item, index) => {
            return (
              <SwipeAction
                key={item.id}
                closeOnAction={false}
                closeOnTouchOutside={false}
                rightActions={[
                  {

                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                    onClick: async () => {
                      await Dialog.confirm({
                        content: '确定要删除吗？',
                        onConfirm: () => {
                          this.del(item.id);
                        }
                      })
                    },
                  },
                ]}
              >
                {/* 内容 */}
                <div className='item'>
                  <img
                    className='checkbox'
                    src={true ? nImg : yImg} alt="" />
                  <img
                  onClick={() => this.changeOne(index)}
                    className='img'
                    src={$pre + item.img} alt="" />
                  <div className='right'>
                    <h3>名称:{item.goodsname}</h3>
                    <div>价格：{item.price}</div>
                    <div>
                      <Button onClick={() => this.add2(item.id, item.num)}>-</Button>
                      {item.num}
                      <Button onClick={() => this.add(item.id)}>+</Button>
                    </div>
                  </div>
                </div>


              </SwipeAction>
            )
          })}
          <div className='footer'>
            <div className='allChecked' onClick={() => this.changeAll()}>
              <img className='checkbox' src={allChecked ? yImg : nImg} alt="" />
              全选
            </div>
            <div className='allPrice'>Y:{allPrice}</div>
          </div>

        </div>

      </div>
    )
  }
}


